<template>
<el-badge :value="localCount" class="ml3">
  <el-button @click="handleLike" type="text" class="pa0">
    <i :class="`material-icons v-mid f4 ${localLike ? 'red' :''}`">{{localLike ? 'favorite' :'favorite_border'}}</i>
    <span class="v-mid f7">{{localLike ? '消赞' :'点赞'}}</span>
    </el-button>
</el-badge>
</template>

<script>
export default {
  name: 'Presion',
  props: ['articleId', 'like', 'count'],
  data() {
    return {
      localLike: this.like,
      localCount: this.count,
    };
  },
  methods: {
    handleLike() {
      this.$store.dispatch('like', {
        articleId: this.articleId,
      })
        .then(() => {
          this.localCount = this.localLike ? this.localCount - 1 : this.localCount + 1;
          this.localLike = !this.localLike;
        });
    },
  },
  watch: {
    like(n) {
      this.localLike = n;
    },
    count(n) {
      this.localCount = n;
    },
  },
};
</script>

<style lang="scss">
.pa0 {
  padding: 0;
}
</style>

